<template>
	<view class="order">
		<view>
			<view>
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="800"
				 fontSize="40rpx" activeColor="#39b54a"></u-tabs-swiper>
			</view>
			<swiper :current="swiperCurrent" :style="'height: ' + height +'px;'" @transition="transition" @animationfinish="animationfinish">
				<!-- 进行中 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<u-card v-for="item in completeList" :key="item._id" box-shadow="-2px 4px 5px #d1d3e0">
							<view class="cardTemplate" slot="body" @tap="toDetails(item._id)">
								<view class="top">
									<view class="orderNumber">订单号:{{item.orderId}}</view>
									<view class="time">下单时间:2020-09-12 20:00:19</view>
								</view>
								<view class="bottom">
									<view class="PickUpNumber">
										<view class="num">{{item.pickUpNum}}</view>
										<view class="text">取餐号</view> 
									</view>
									<view class="amountMoney">
										<view class="num">{{item.price}}</view>
										<view class="text">金额</view>
									</view>
									<view class="commodityNumber">
										<view class="num">{{item.num}}</view>
										<view class="text">商品数</view>
									</view>
								</view>
							</view>
						</u-card>
					</scroll-view>
				</swiper-item>

				<!-- 已完成 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<u-card v-for="item in conductList" :key="item._id" box-shadow="-2px 4px 5px #d1d3e0">
							<view class="cardTemplate" slot="body" @tap="toDetails(item._id)">
								<view class="top">
									<view class="orderNumber">订单号:{{item.orderId}}</view>
									<view class="time">下单时间:2020-09-12 20:00:19</view>
								</view>
								<view class="bottom">
									<view class="PickUpNumber">
										<view class="num">{{item.pickUpNum}}</view>
										<view class="text">取餐号</view>
									</view>
									<view class="amountMoney">
										<view class="num">{{item.price}}</view>
										<view class="text">金额</view>
									</view>
									<view class="commodityNumber">
										<view class="num">{{item.num}}</view>
										<view class="text">商品数</view>
									</view>
								</view>
							</view>
						</u-card>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<Tabbar />
	</view>
</template>

<script>
	import {
		getOrderList
	} from '../../api/api.js'
	import Tabbar from '../../components/Tabbar.vue'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				list: [{
					name: '已完成'
				}, {
					name: '进行中'
				}],
				height: 750,
				conductList: [], //进行中订单列表
				completeList: [], //已完成订单列表
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			};
		},
		methods: {
			//获取订单列表
			async getList() {
				const res = await getOrderList()
				this.conductList = res.data.filter(item => item.status == 0)
				this.completeList = res.data.filter(item => item.status == 1)
				console.log(this.conductList)
			},
			//跳转订单详情
			toDetails(id) {
				uni.navigateTo({
					url: '/pages/order/order_details?_id=' + id
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			setHeight() {
				let windowHeight = uni.getSystemInfoSync().windowHeight; //页面可见区域
				windowHeight = windowHeight - 44; //页面可见区域 - 在线购物条高度					
				console.log("windowHeight = " + windowHeight)
				var query = uni.createSelectorQuery();
				query.select('.view_head').boundingClientRect(rect => {
					if (rect) {
						console.log("view_head.height = " + rect.height)
						this.height = windowHeight - rect.height; //页面可见区域 - 头部高度
						console.log("this.height = " + this.height)
					}
				}).exec()
			}
		},
		mounted() {
			this.setHeight()
		},
		onShow() {
			if(!uni.getStorageSync('token')){
				uni.switchTab({
					url:'../me/me'
				})
				return uni.showToast({
					title: '查看订单请先登录',
					icon:'none',
					duration: 2000
				})
			} 
			this.getList()
		},
		onPullDownRefresh() {
			console.log('refresh')
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		.u-card {

			.cardTemplate {
				view {
					height: 50%;
				}

				.top {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					padding: 5upx 20upx 30upx 20upx;
					border-bottom: 1px solid #999;

					view {
						width: 100%;
					}

					.orderNumber {
						font-size: 12px;
						color: #000;
						font-weight: bold;
						margin-bottom: 10upx;
					}

					.time {
						font-size: 12px;
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						text-align: center;
						flex: 1;
						padding-top: 20upx;

						.num {
							color: #000;
							font-weight: bold;
							font-size: 16px;
						}
					}
				}
			}
		}
	}
</style>
